<template>
  <div style="display: flex; backgroundColor:rgb(239, 239, 239);justify-content:space-between;flex-wrap:wrap;">
    <!-- 卡片一 -->
    <div class="onecard">
      <div class="contentbox">
        <h3 style="text-align: left;">今日数据变化</h3>
        <div style="margin-top: 18px;text-align: left;font-size: 14px;padding:0 40px;margin-top:10px">
          <div style="display: flex;justify-content:space-between;margin-top: 20px;">
            <p>今日新增学员数<span style="font-size: 18px;margin-left: 10px;">{{ today.newStudent }}个</span></p>
            <p>待续费学员数 <span style="font-size: 18px;margin-left: 10px;">{{ today.notContinued }}个</span></p>
          </div>
          <div style="display: flex;justify-content:space-between;margin-top: 20px;">
            <p>未支付订单数 <span style="font-size: 18px;margin-left: 10px;">{{ today.notPayment }}个</span></p>
            <p>待补齐尾款订单数 <span style="font-size: 18px;margin-left: 10px;">{{ today.notBalancePayment }}个</span></p>
          </div>
          <div style="display: flex;justify-content:space-between;margin-top: 20px;">
            <p>今日上课学员数 <span style="font-size: 18px;margin-left: 10px;">{{ today.students }}个</span></p>
            <p>今日上课老师数 <span style="font-size: 18px;margin-left: 10px;">{{ today.teachers }}个</span></p>
          </div>
          <div style="display: flex;justify-content:space-between;margin-top: 20px;">
            <p>意向学员新增数 <span style="font-size: 18px;margin-left: 10px;">{{ today.intentionStudents }}个</span></p>
            <p>今日订单数 <span style="font-size: 18px;margin-left: 10px;">{{ today.order }}个</span></p>
          </div>
          <div style="display: flex;justify-content:space-between;margin-top: 20px;">
            <p>今日新单数 <span style="font-size: 18px;margin-left: 10px;">{{ today.newOrder }}个</span></p>
            <p>今日续单数<span style="font-size: 18px;margin-left: 10px;">{{ today.ContinuedOrder }}个</span></p>
          </div>
        </div>

      </div>
    </div>
    <!-- 卡片2 -->
    <div class="twocard">
      <div class="contentbox">
        <h3 style="text-align: left;">事项提醒<el-button type="primary" size="mini" style="margin-left: 150px;">更多</el-button>
        </h3>
        <p style="text-align: left;margin-top: 18px;" v-for="i in matter"><img style="width:20px;vertical-align:bottom"
            src="https://img.zcool.cn/community/018459568f541732f87574be60c997.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100">{{
              i.label }}</p>
      </div>
    </div>
    <!-- 卡片3 -->
    <div class="threecard">
      <div class="contentbox">
        <h3 style="text-align: left;">生日提醒<el-button type="primary" size="mini" style="margin-left: 150px;">更多</el-button>
        </h3>
        <div style="display: flex;flex-wrap:wrap; margin-top:20px">
          <div style="width: 90px;margin-left: 5px;" v-for="i in birthdays">
            <img style="width: 80%;" src="../../assets/birth.png" alt="">
            <p>{{ i.name }}</p>
            <p>{{ i.birthday }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 卡片4 -->
    <!-- <div class="fourcard">
      <div class="contentbox">
        <h3 style="text-align: left;">今日课消</h3>
      </div>
    </div> -->
    <!-- 卡片5 -->
    <div class="fivecard">
      <div class="contentbox">
        <h3 style="text-align: left;">今日业绩</h3>
        <!-- <el-card class="box-card" style="height: 300px; width:300px"> -->
        <div >
          <Echarts ></Echarts>
          1
          <Echarts></Echarts>
        </div>

        <!-- </el-card> -->
        
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from './detail/echarts.vue';

export default {
  data() {
    return {
      matter: [
        {
          val: 1,
          label: '9月22日 10:20:56 严致远续费成功'
        }, {
          val: 2,
          label: '9月20日 18:40:26 朱嘉伦续费成功'
        },
        {
          val: 3,
          label: '9月19日 11:24:36 董杰宏报名成功'
        },
        {
          val: 4,
          label: '9月17日 16:25:50 丁睿课程到期'
        },
        {
          val: 5,
          label: '9月17日 12:00:06 毛子异续费成功'
        }
      ],
      birthdays: [
        {
          id: 1,
          name: "冯秀英",
          birthday: "9.22"
        },
        {
          id: 2,
          name: "方晓明",
          birthday: "9.22"
        },
        {
          id: 3,
          name: "郑宇宁",
          birthday: "9.22"
        },
        {
          id: 4,
          name: "沈岚",
          birthday: "9.22"
        },
        {
          id: 5,
          name: "范云熙",
          birthday: "9.22"
        }
      ],
      today: {
        newStudent: 1,
        notContinued: 20,
        notPayment: 12,
        notBalancePayment: 11,
        students: 30,
        teachers: 23,
        intentionStudents: 14,
        order: 6,
        newOrder: 4,
        ContinuedOrder: 2
      }
    };
  },
  components: { Echarts }
}
</script>

<style >
.onecard {
  width: 40%;
  height: 300px;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.twocard {
  width: 28%;
  height: 300px;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.threecard {
  width: 28%;
  height: 300px;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.fourcard {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  border-radius: 10px;
  background-color: #fff;
}

.fivecard {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  border-radius: 10px;
  background-color: #fff;
}

.contentbox {
  padding: 18px;
}
</style>